<template>
  <scroll-view scroll-y class="viewport">
    <view class="box" v-for="item in commentInfo" :key="item">
      <image :src="item.pic" mode="aspectFill" class="box-pic"></image>
      <view class="right-box">
        <view class="box-title">
          <view class="box-name">{{ item.title }}</view>
          <image :src="item.isLike ? '' : ''" mode="aspectFill" class="box-like"></image>
        </view>
        <view class="box-dewc">{{ item.desc }}</view>
        <view class="box-commment">{{ item.commentNum }} comments</view>
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const commentInfo = ref([])
commentInfo.value = [
  {
    id: Math.random(0, 200000) * 1000,
    title: 'Fei Da Chu',
    desc: 'Hunan University, referred to as "HNU", is located in Changsha, …',
    commentNum: '10',
    pic: '/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg',
    isLike: false,
  },
  {
    id: Math.random(0, 200000) * 1000,
    title: 'Fei Da Chu',
    desc: 'Hunan University, referred to as "HNU", is located in Changsha, …',
    commentNum: '10',
    pic: '/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg',
    isLike: false,
  },
  {
    id: Math.random(0, 200000) * 1000,
    title: 'Fei Da Chu',
    desc: 'Hunan University, referred to as "HNU", is located in Changsha, …',
    commentNum: '10',
    pic: '/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg',
    isLike: false,
  },
  {
    id: Math.random(0, 200000) * 1000,
    title: 'Fei Da Chu',
    desc: 'Hunan University, referred to as "HNU", is located in Changsha, …',
    commentNum: '10',
    pic: '/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg',
    isLike: false,
  },
  {
    id: Math.random(0, 200000) * 1000,
    title: 'Fei Da Chu',
    desc: 'Hunan University, referred to as "HNU", is located in Changsha, …',
    commentNum: '10',
    pic: '/static/images/0103o120005pr19sjA7F7_R_1600_10000.jpg',
    isLike: false,
  },
]
</script>

<style lang="scss" scoped></style>
